<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
  <link href="../css/mui.min.css" rel="stylesheet"/>
  <link href="../css/mui.picker.css" rel="stylesheet"/>
  <link href="../css/mui.poppicker.css" rel="stylesheet"/>
  <link rel="stylesheet" type="text/css" href="../fonts/iconfont.css"/>
  <link rel="stylesheet" type="text/css" href="../css/timecheck.css"/>
  <script>
    var width =window.localStorage.getItem('width');
    document.documentElement.style.fontSize =  width ? width/6.4+  'px' :'55px';
  </script>
  <style type="text/css">
    .actDesc{
      background: rgb(255,255,255);
      width: 100%;
    }
    .actDesc_title{
      font-size: 0.22rem;
      height: 0.7rem;
      line-height: 0.7rem;
      width: 90%;
      margin: 0 auto;
    }
    .actDesc_line{
      width: 96%;
      margin: 0 auto;
      height: 1px;
      border: 1px solid rgb(238,238,238);
    }
    .actDesc_content{
      font-size: 0.22rem;
      width: 90%;
      margin: 0 auto;
      padding: 0.1rem 0 0.2rem;
    }
    .actDesc_content p{
      width: 100%;
      margin: 0.1rem auto;
      font-size: 0.22rem;
    }
    .actDesc_content p span{
      color:black;
      margin:  0.2rem auto 0.2rem 0 ;
    }
    .tab{
      width: 60%;
      font-size: 0.22rem;
      color: black;
      margin: 0.2rem auto;
      overflow: hidden;
    }
    .tab span{
      display: block;
      width: 50%;
      float: left;
      text-align: center;
      padding: 0.1rem 0 ;
      background: rgb(255,255,255);
    }
    .tab .default{
      background: #CCCCCC;
    }
    .tablebox{
      width: 100%;
    }
    .actTable{
      width: 100%;
    }
    .table_head{
      width: 100%;
      height: 0.72rem;
      /*line-height: 0.72rem;*/
      vertical-align: middle;
      background: white;
    }
    .table_head td{
      text-align: center;
      font-size: 0.2rem;
    }
    .bglight{
      background: white;
    }
    .table_empty{
      width: 100%;
      height: 1.22rem;
    }
    .table_empty p{
      width: 100%;
      text-align: center;
      font-size: 0.26rem;
      line-height: 1.22rem;
      height: 100%;
    }
    .table_content{
      width: 100%;
    }
    .table_content_tr{
      width: 100%;
      height: 0.9rem;
    }
    .table_content_tr td{
      font-size: 0.2rem;
      text-align: center;
      height: 0.9rem;
    }
  </style>
</head>

<body>
<div id="app" class="mui-content">
  <div class="actDesc">
    <div class="actDesc_title">会员卡.超值首充活动</div>
    <div class="actDesc_line"></div>
    <div class="actDesc_content">
      <p>
        <span>活动形式：</span><br/>
        用户第一次办会员卡，有机会享受一次超值套餐。
      </p>
      <p>
        <span>活动目的：</span><br/>
        充值额度低可以提高开卡率，充值额度高可以提高销售额。
      </p>
    </div>
  </div>
  <div class="tab">
    <span @click="choose(1)" :class="{default:chooseType ===1}">执行中</span>
    <span @click="choose(2)" :class="{default:chooseType ===2}">已结束</span>
  </div>
  <div class="tablebox">
    <table class="actTable" >
      <tr class="table_head">
        <td style="width: 30%;text-align: center;padding-left: 0.4rem">活动名</td>
        <td style="width: 20%;color: #999999;">活动时间</td>
        <td style="width: 16%">参与人数</td>
        <td style="width: 17%">销售额</td>
        <td style="width: 17%">门店ARPPU</td>
      </tr>
    </table>
    <div class="table_empty" v-show="data_empty===0">
      <p>无数据</p>
    </div>
    <table
        v-show="listData_show!==[]"
        class="table_content"
    >
      <tr
          class="table_content_tr"
          v-for="(item,index) in listData_show"
          key="index"
          :class="{bglight:index%2===1}"
          @click="toPage(item)"
      >
        <td style="width: 30%;">
          <div style="height: 100%;width: 100%;display: flex;align-items: center">
            <img v-show="chooseType===1"  style="width: 0.2rem;height: 0.2rem;margin: 0 0.1rem;color: black " src="../images/plarBlack.png" alt="">
            <img v-show="chooseType===2" style="width: 0.2rem; height: 0.2rem;margin: 0 0.1rem;color: black" src="../images/endBlack.png" alt="">
            <span style="vertical-align:middle;flex:1;text-align: center; ">{{item.actName}}</span>
          </div>
        </td>
        <td style="width: 20%;color: #999999;">
          <div style="width: 100%;line-height: 0.26rem">
            <span style="font-size: 0.16rem;">{{item.actDate}}</span><br/>
            <span v-if="item.dayNum!==''">{{item.dayNum}}</span>
          </div>
        </td>
        <td style="width: 16%"><span>{{item.peopleNum}}</span></td>
        <td style="width: 17%"><span>{{toDecimal2(item.money)}}</span></td>
        <td style="width: 17%"><span>{{toDecimal2Percent(item.storeArppu)}}</span></td>
      </tr>
    </table>
  </div>
</div>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/mui.min.js"></script>
<script src="../js/mui.picker.js"></script>
<script src="../config.js"></script>
<script type="text/javascript">
  mui.init()
  var vm = new Vue({
    el: "#app",
    data: function () {
      return {
        storeId:'',
        storeName:'',
        actType:'',//1：首充 2：充值 3：赠送
        data_empty:0,//0:无数据 1:有数据
        fromDate:'',
        toDate:'',
        dateType:'',
        currentShopObj:{},
        chooseType:1,// 1: 执行中  2：已结束
        listData:{},
        actnum:'',
        testData:{
          "execution":[
            {
              "actId":6,
              "actName":"测试会员卡",
              "actDate":"19.01.01至19.12.31",
              "limitType":0,
              "dayNum":"364天",
              "actTimeType":0,
              "specialDay":0,
              "startDate":0,
              "endDate":0,
              "startTime":0,
              "endTime":0,
              "actState":2,
              "peopleNum":"--",
              "money":0,
              "storeArppu":0,
              "actOpen":0,
              "storePeopleNum":0,
              "newPeopleNum":0,
              "proportion":0
            },
            {
              "actId":7,
              "actName":"测试会员卡首充不限制",
              "actDate":"19.01.01至19.01.31",
              "limitType":0,
              "dayNum":"30天",
              "actTimeType":0,
              "specialDay":0,
              "startDate":0,
              "endDate":0,
              "startTime":0,
              "endTime":0,
              "actState":2,
              "peopleNum":"--",
              "money":0,
              "storeArppu":0,
              "actOpen":0,
              "storePeopleNum":0,
              "newPeopleNum":0,
              "proportion":0
            },],
          "endAct":[
          ]
        }
      }
    },
    mounted: function () {
      var vm = this;
      mui.plusReady(function () {
        vm.receiveParams();
      });

    },
    computed:{
      listData_show:function () {
        if(this.chooseType===1){
          this.data_empty = JSON.stringify(this.listData.execution) === "[]" ? 0 :1 ;
          return this.listData.execution;
        }else if(this.chooseType===2){
          this.data_empty = JSON.stringify(this.listData.endAct) === "[]" ? 0 :1 ;
          return this.listData.endAct;
        }
      },
    },
    methods:{
      toDecimal2:function(x) {//处理金额，保留两位小数
        var f = parseFloat(x);
        if (isNaN(f)) {
          return false;
        }
        f = Math.round(x);
        var s = f.toString();
        var rs = s.indexOf('.');
        if (rs < 0) {
          rs = s.length;
          s += '.';
        }
        while (s.length <= rs + 2) {
          s += '0';
        }
        return s;
      },
      toDecimal2Percent:function(x) {//处理充值金额，保留两位小数
        var f = parseFloat(x);
        if (isNaN(f)) {
          return false;
        }
        f = Math.round(x)/100;
        console.log("ARPPU:"+f);
        var s = f.toString();
        var rs = s.indexOf('.');
        if (rs < 0) {
          rs = s.length;
          s += '.';
        }
        while (s.length <= rs + 2) {
          s += '0';
        }
        return s;
      },
      receiveParams:function(){
        var sf = plus.webview.currentWebview();
        this.currentShopObj = sf.currentShopObj;
        this.storeId = sf.storeId;
        this.storeName = sf.storeName;
        this.actType = sf.actType;
        this.fromDate = sf.fromDate ;
        this.toDate = sf.toDate ;
        this.dateType = sf.dateType;
        this.actnum =sf.actnum;
        vm.getActData();
      },
      choose:function (type) {
        if(type!== this.chooseType){
          this.chooseType = type;
        }
      },
      getActData:function(){
        var vm = this;
        var data={
          storeId:vm.storeId,
          actType:vm.actType,
        }
        console.log(JSON.stringify(data))
        config.ajax({
          url:'/act/oneAct',
          data:{
            storeId:vm.storeId,
            actType:vm.actType,
          },
          success:function (res) {
            if (res.result === 1){
              console.log("活动数据：");
              console.log(JSON.stringify(res));
              vm.listData= res.oneActTypeDetails;
            } else{
              mui.toast(res.errormsg);
            }
          }
        });
      },
      toPage:function(item){
        var  vm=this;
        var storeName=vm.storeName
        console.log(JSON.stringify(item))
        mui.openWindow({
          url: './rechargeActivityDetails.html',
          id: 'rechargeActivityDetails',
          styles: {
            titleNView: {
              titleText:  storeName ,
              titleColor: "#FFFFFF",
              titleSize: "17px",
              backgroundColor: "#FF6800",
              autoBackButton: true,
              buttons: [{
                fontWeight: 'normal',
                fontSize: '18px',
                float: 'right',
                fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
                text: "\ue602",
                onclick: function() {
                  var allPage = plus.webview.all()
                  var nowPage = plus.webview.getWebviewById('index')
                  for(var i = 0; i < allPage.length; i++) {
                    if(allPage[i].getURL() !== nowPage.getURL()) {
                      plus.webview.close(allPage[i]);
                    }
                  }
                }
              }],
              splitLine: {
                color: "#CCCCCC",
                height: "1px"
              }
            }
          },
          extras: {
            storeId: vm.storeId,
            storeName: vm.storeName,
            fromDate: vm.fromDate,
            toDate:vm.toDate,
            dateType:vm.dateType,
            actnum: vm.actnum,
            actType:vm.actType,
            actId:item.actId,
            actState:item.actState,
          },
        });
      },
    },
  })
</script>
</body>

</html>